<template>
    <div class="main-container message-container">
        <el-card class="tab-card">
            <el-tabs v-model="activeName">
                <el-tab-pane name="pending">
                    <el-badge :value="200" :max="100" class="item" slot="label">
                        <span>待处理</span>
                    </el-badge>
                    <ul class="mess-list">
                        <li v-for="(item, index) in pendingTab.list"
                             :class="{'new-mess-item': item.newMess, 'mess-item': true}"
                             :key="index">
                            <p>
                                <span class="link-none">{{item.userName}}</span>
                                <span>提交了{{item.type}}</span>
                                <span class="link-none">{{item.name}}</span>
                                <span>，需要您{{item.status}}，请及时处理</span>
                            </p>
                            <p>备注：{{item.remark || "--"}}</p>
                            <p>{{item.time || "--"}}</p>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane name="done" label="已处理">
                    <ul class="mess-list">
                        <li v-for="(item, index) in pendingTab.list"
                            :class="{'mess-item': true}"
                            :key="index">
                            <p>
                                <span class="link-none">您完成了{{item.userName}}</span>
                                <span class="link-none">提交的{{item.name}}</span>
                                <span>{{item.status}}，优秀呢！</span>
                            </p>
                            <p>{{item.time || "--"}}</p>
                        </li>
                    </ul>
                </el-tab-pane>
<!--                <el-tab-pane name="my" label="我的申请">-->
<!--                </el-tab-pane>-->
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "message",
        data() {
            return {
                activeName: "pending",
                pendingTab: {
                    list: [
                        {
                            id: 1,
                            userName: "<张三>",
                            name: "<翼支付1.0>",
                            type: "埋点需求",
                            status: "审批",
                            newMess: false
                        },
                        {
                            id: 2,
                            userName: "<张三>",
                            name: "<翼支付1.0>",
                            type: "埋点需求",
                            status: "审批",
                            newMess: true
                        }
                    ]
                }
            }
        }
    }
</script>

<style lang="scss">
    .message-container {
        .el-badge__content.is-fixed {
            right: 4px;
            transform: translateY(0) translateX(100%);
        }
        .mess-list {
            padding-left: 16px;
            margin: 0;
            .mess-item {
                color: #5a5a5a;
                list-style-type: none;
                border-bottom: 1px solid #e8eaec;
                padding: 10px 0;
                &.new-mess-item {
                    list-style-type: disc;
                    color: #333;
                    font-weight: 500;
                    &::marker {
                        color: red;
                    }
                }
                p {
                    margin: 0 0 5px 0;
                }
            }
        }
    }
</style>
